<template>
	<view :style="{'padding-top':CustomBar+'px'}">
		<view class="align-center rowsb">
			<view class="flex align-center">
				<view v-for="(item,index) in titleList" :key="index" class="margin-left"
					@click="titleActiveNum = index">
					<view class="square_title" :class="{active_square_title:index == titleActiveNum}">{{item.title}}
					</view>
					<view class="active_heng" :class="{active_heng2:index == titleActiveNum}"></view>
				</view>
			</view>
			<view v-if="titleActiveNum ==1" class="table_xing align-center rowsc margin-right"
				@click="$tools.push('/pages/square/modules/targeted/targetedValue')">
				<image src="/static/square/imgxingxing-3.png" mode="widthFix" style="width: 30rpx;"></image>
				<text class="margin-left-xs">4.4</text>
			</view>
			<view v-if="titleActiveNum ==2" class="margin-right" style="color: #9AA2B5;" @click="screening">
				<text>筛选</text>
				<text class="cuIcon-unfold margin-left-xs"></text>
			</view>
		</view>
		<view class="padding text-center" v-show="titleActiveNum ==0" @click="videoMen()">
			<image src="https://img1.baidu.com/it/u=459426827,551167380&fm=26&fmt=auto" mode="aspectFill"
				class="square_cover"></image>
			<image src="/static/square/imgxiangji.png" mode="" class="square_play_image"
				@click.stop="$tools.push('/pages/userInfo/modules/photoAlbum/photoAlbum')"></image>
		</view>
		<view v-show="titleActiveNum ==1">
			<view class="padding rowsb align-center">
				<view class="align-center ">
					<view class="square_title2">顶部抢聊</view>
					<view>
						<!-- <image src="/static/square/imganniu.png" mode="" class="square_switch"></image> -->
						<image src="/static/square/imganniu-3.png" mode="" class="square_switch"></image>
					</view>
				</view>
				<view>
					<image src="/static/square/imgdingwei-1.png" mode="" class="square_lon"></image>
				</view>
			</view>
			<view class="message_body flex justify-between " v-for="(item,index) in 4" :key="index">
				<image src="/static/message/imgliebiao.png" mode="aspectFill" class="message_headimg margin-left-xs">
				</image>
				<view>
					<view class="message_name onelineshow">4605445</view>
					<view class="message_evaluate margin-top">评价值：3.2</view>
				</view>
				<image src="/static/square/imgguoqi.png" mode="" class="message_china"></image>
				<view class="message_score align-center  padding-lr-xs">
					<image src="/static/square/imgxingxing-3.png" mode="" class="score_xing"></image>
					<text class="score_num margin-left-sm">4.0</text>
				</view>
				<image src="/static/imgxiangji-3.png" mode="" class="mesage_plav_video"></image>
			</view>
		</view>
		<view v-show="titleActiveNum ==2">
			<view class="flex justify-between align-center solid-bottom padding" v-for="(item,index) in 3" :key='index'>
				<view class="flex align-center">
					<image src="" mode="" class="square_image"></image>
					<view class="margin-left">
						<view class="square_name one_overflow">希希仙女希希仙女希希仙女希希仙女希希仙女</view>
						<view class="square_classify margin-top-sm">
							<text>地区</text>
							<text class="margin-lr">年龄</text>
							<text>身高</text>
						</view>
					</view>
				</view>
				<view>
					<view class="align-center">
						<text class="square_time">1小时前</text>
						<image src="/static/square/imgxiaoxi-4.png" mode="" class="square_icon"></image>
					</view>
					<view class="justify-end flex margin-top-sm">
						<view class="square_messageTo">
							打招呼
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 弹窗 -->
		<view class="warp" v-if="isScreening" @click="screening">
			<view class="screening_body animation-slide-bottom" @click.stop>
				<view class="rowsb align-center text-center padding">
					<view style="width: 33.3%;"></view>
					<view style="width: 33.3%;" class="text-bold text-xl">筛选</view>
					<view style="width: 33.3%;" class="justify-end" @click="screening()">
						<text class="cuIcon-roundclose text-gray" style="font-size: 40rpx;"></text>
					</view>
				</view>
				<view class="padding">
					<text class="text-bold ">距离</text>
					<text class="cuIcon-back text-gray margin-left"></text>
					<text class="text-gray">
						<text>11</text>
						<text style="color: #EAA019;">km</text>
					</text>
				</view>
				<view class="input_km text-center">
					<input type="text" value="" placeholder="请输入距离" />
				</view>
				<view class="padding-lr padding-top">
					<text class="text-bold ">年龄</text>
					<text class="text-gray margin-left">
						<text>11</text>
						<text style="color: #EAA019;">岁</text>
					</text>
				</view>
				<view class="padding align-center rowsb ">
					<view class="input_left">
						<input type="text" value="" placeholder="最低年龄" />
					</view>
					<view style="height: 1rpx;width: 100rpx; background-color: #EEEEEE;"></view>
					<view class="input_left">
						<input type="text" value="" placeholder="最高年龄" />
					</view>
				</view>
				
				<view class="padding-lr">
					<text class="text-bold ">身高</text>
					<text class="text-gray margin-left">
						<text>11</text>
						<text style="color: #EAA019;">cm</text>
					</text>
				</view>
				<view class="padding align-center rowsb ">
					<view class="input_left">
						<input type="text" value="" placeholder="最低身高" />
					</view>
					<view style="height: 1rpx;width: 100rpx; background-color: #EEEEEE;"></view>
					<view class="input_left">
						<input type="text" value="" placeholder="最高身高" />
					</view>
				</view>
				<view class="rowsa">
					<view class="submit1" @click="chatMessage()">重置</view>
					<view class="submit2">完成</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				titleList: [{
						title: "求聊",
						id: 1
					},
					{
						title: "抢聊",
						id: 2
					},
					{
						title: "广场",
						id: 3
					}
				],
				isScreening:false,
				titleActiveNum: 0, //默认选中状态
			}
		},
		//生命周期函数
		onReady() {},
		onLoad() {},
		onShow() {},
		methods: {
			//筛选
			screening(){
				this.isScreening = !this.isScreening
			},
			//跳转申请心动女生
			videoMen(index) {
				uni.navigateTo({
					url: '/pages/square/modules/videoForm'
				})
			}
		},
		computed: {},
		components: {}
	}
</script>

<style lang="scss">
	.active_square_title {
		font-size: 46rpx !important;
		font-family: PingFang SC !important;
		font-weight: bold !important;
		color: #06121E !important;
		opacity: 1;
	}

	.square_title {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
	}

	.active_heng {
		width: 42rpx;
		height: 10rpx;
		background: #EAA019;
		opacity: 1;
		border-radius: 5rpx;
		opacity: 0;
		margin: 0 auto;
		margin-top: 10rpx;
	}

	.active_heng2 {
		opacity: 1 !important;
	}

	.square_cover {
		width: 617rpx;
		height: 926rpx;
		background: rgba(0, 0, 0, 0);
		opacity: 1;
		border-radius: 32rpx;
	}

	.square_play_image {
		width: 176rpx;
		height: 176rpx;
		margin-top: -88rpx;
	}

	/* 抢聊 */
	.square_title2 {
		font-size: 32rpx;
		color: #9AA2B5;
		margin-bottom: 10rpx;
	}

	.square_switch {
		width: 70rpx;
		height: 37rpx;
		margin-left: 30rpx;
	}

	.square_lon {
		width: 42rpx;
		height: 42rpx;
	}

	/* 消息列表 */
	.message_body {
		width: 676rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 20rpx #EDEEF3;
		opacity: 1;
		border-radius: 12rpx;
		margin: 0 auto;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		margin-bottom: 30rpx;
	}

	.message_headimg {
		width: 128rpx;
		height: 128rpx;
		border-radius: 50%;
		background-color: #EEEEEE;
	}

	.message_name {
		width: 150rpx;
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #000000;
		opacity: 1;
	}

	.message_evaluate {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
	}

	.message_score {
		width: 120rpx;
		height: 48rpx;
		background: #EDEEF3;
		opacity: 1;
		border-radius: 28rpx;
	}

	.score_xing {
		width: 27rpx;
		height: 26rpx;
	}

	.score_num {
		font-size: 28rpx;
		font-weight: 400;
	}

	.message_china {
		width: 42rpx;
		height: 42rpx;
	}

	.mesage_plav_video {
		width: 106rpx;
		height: 106rpx;
		border-radius: 50%;
		opacity: 1;
	}

	/* 广场 */
	.square_image {
		width: 88rpx;
		height: 88rpx;
		background: #FF8F2E;
		border-radius: 50%;
	}

	.square_icon {
		width: 40rpx;
		height: 40rpx;
	}

	.square_name {
		width: 308rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		opacity: 1;
	}

	.square_classify {
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #B7BED8;
		opacity: 1;
	}

	.square_time {
		font-size: 20rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9AA2B5;
		opacity: 1;
		margin-right: 20rpx;
	}

	.square_messageTo {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #EAA019;
		opacity: 1;
	}

	.table_xing {
		width: 134rpx;
		height: 54rpx;
		background: #EDEEF3;
		opacity: 1;
		border-radius: 28rpx;
		line-height: 54rpx;
		text-align: center;
		color: #171D34;
	}
	// 弹窗
	.screening_body {
		width: 750rpx;
		height: 865rpx;
		background: #FFFFFF;
		border-radius: 30rpx 30rpx 0px 0px;
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
	}

	.input_km {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 690rpx;
		height: 80rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 7rpx;
		margin: 0 auto;
	}

	.input_left {
		width: 275rpx;
		height: 110rpx;
		background: #F7F6FA;
		opacity: 1;
		border-radius: 7rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
	}
	.submit1 {
		width: 260rpx;
		height: 80rpx;
		background: #FFFFFF;
		border: 2rpx solid #707070;
		opacity: 1;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
	}
	
	.submit2 {
		width: 260rpx;
		height: 80rpx;
		background: linear-gradient(180deg, #EAA019 0%, #BA4949 100%);
		opacity: 1;
		border-radius: 40rpx;
		line-height: 80rpx;
		text-align: center;
		color: white;
	}
	// 弹窗
</style>
